<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: 20px">标题：{{ form.title }}</div>
      <div v-if="form.nickname" style="margin-top: 20px">
        作者：{{ form.nickname }}
      </div>
      <div style="margin-top: 20px">
        帖子原文：<span @click="commentDetail" style="color: #3a8ee6; cursor: pointer">详情</span>
      </div>
      <div style="margin-top: 20px">评论：{{ form.commentCount || 0 }}</div>
      <div class="pageRight">
        <el-button size="small" icon="el-icon-delete" style="width: 100px" @click="deleteManyComment()">批量删除</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-table size="mini" :data="tableData.data" border style="width: 100%" @selection-change="selectTableList">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column prop="id" align="center" label="ID" width="100">
          </el-table-column>
          <el-table-column align="center" label="用户">
            <template slot-scope="scope">
              <el-image :src="scope.row.memberIcon" style="width: 40px; height: 40px"></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="memberNickname" label="昵称">
          </el-table-column>
          <el-table-column prop="comment" align="center" label="评论内容">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="评论时间">
          </el-table-column>
          <el-table-column align="center" prop="replayCount" label="回复数">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="deleteComment(scope.row.id)">删除</el-button>
              <el-button size="mini" type="text" v-if="parseFloat(scope.row.replayCount) > 0"
                @click="seeReplydetail(scope.row)">查看回复</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pageRight" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum"
          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>

    <reply-list @close="closeDraver" ref="replyRef"></reply-list>
    <detail ref="detailRef"></detail>
    <!-- <el-dialog title="预览视频" :visible.sync="dialogVideoVisible" width="400px" @close="handleCancel">
      <div style="text-align: center; margin: 0 auto">
        <video ref="vueRef" width="400px" height="600px" :src="form.linkUrl" controls></video>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import detail from '../../videoData/hotVideo/components/detail.vue'
import replyList from "@/views/article/components/replyList.vue";
import { getArticleInfo, getCommentList, deleteComment } from "@/api/article";
export default {
  components: {
    replyList,
    detail
  },
  name: "talk",
  data() {
    return {
      id: "",
      form: {},
      tableData: {
        data: [],
        total: 0,
      },
      searchForm: {
        pageNum: 1,
        pageSize: 10,
      },
      selectList: [],
      dialogVideoVisible: false,
    };
  },
  async created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      await this.getInfo();
      await this.getList();
    }
  },
  methods: {
    handleCancel() {
      this.dialogVideoVisible = false;
      this.$refs.vueRef.pause(); //暂停
    },
    closeDraver() {
      this.getList();
    },
    seeReplydetail(row) {
      this.$refs.replyRef.openDrawer(row);
      this.drawerFlag = true;
    },
    selectTableList(val) {
      this.selectList = val;
    },
    deleteManyComment() {
      if (this.selectList.length == 0) {
        this.$message({
          message: "请选择要删除的评论",
          type: "warning",
        });
        return;
      } else {
        this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let ids = [];
          this.selectList.forEach((v) => {
            ids.push(v.id);
          });
          deleteComment(ids.join(",")).then(async (res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            await this.getInfo();
            await this.getList();
          });
        });
      }
    },
    deleteComment(v) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteComment(v).then(async (res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            await this.getInfo();
            await this.getList();
          }
        });
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    commentDetail() {
      if (this.form.type == 1) {
        this.$router.push({
          path: "/content/detail",
          query: {
            id: this.id,
          },
        });
      } else if (this.form.type == 4) {
        this.$router.push({
          path: "/content/postDetail",
          query: {
            id: this.id,
          },
        });
      } else if (this.form.type == 3) {
        let obj = Object.assign({}, this.form, { vid: this.form.videoId });
        this.$refs.detailRef.openlog(obj)
        // this.$refs.detailRef.openlog(this.form);
      }
    },
    getInfo() {
      getArticleInfo(this.id).then((res) => {
        console.log(res.data);
        res.data.imageUrl = res.data.imageUrl.split(",");
        this.form = res.data;
      });
    },
    getList() {
      let params = {
        articleId: this.id,
        ...this.searchForm,
      };
      getCommentList(params).then((res) => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
</style>
